<template>
  <div>
    <div class="scenics">
      <div class="area">区域:</div>
      <div class="address">
        <div class="spans">
          <span v-for="item of scenicsList" :key="item.id">{{
            item.name
          }}</span>
        </div>
        <div class="more" @click="loadMore">
          <i class="el-icon-d-arrow-right" :class="{ up: showMore }"></i>
          等{{ scenics.length }}个景点
        </div>
      </div>
    </div>
    <div class="price">
      <div class="area">
        均价:
        <el-tooltip
          effect="dark"
          content="等级均价由平日价格计算得出，节假日价格会有上浮。"
          placement="top"
        >
          <i class="tips">?</i>
        </el-tooltip>
      </div>
      <div class="score">
        <el-tooltip
          effect="dark"
          content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
          placement="bottom-start"
        >
          <div class="mark">
            <span class="iconfont icon-huangguan1"></span>
            <span class="iconfont icon-huangguan1"></span>
            <span class="iconfont icon-huangguan1"></span>
            <span>￥332</span>
          </div>
        </el-tooltip>
        <el-tooltip
          effect="dark"
          content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
          placement="bottom-start"
        >
          <div class="mark">
            <span class="iconfont icon-huangguan1"></span>
            <span class="iconfont icon-huangguan1"></span>
            <span class="iconfont icon-huangguan1"></span>
            <span class="iconfont icon-huangguan1"></span>
            <span>￥521</span>
          </div>
        </el-tooltip>
        <el-tooltip
          effect="dark"
          content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
          placement="bottom-start"
        >
          <div class="mark">
            <span class="iconfont icon-huangguan1"></span>
            <span class="iconfont icon-huangguan1"></span>
            <span class="iconfont icon-huangguan1"></span>
            <span class="iconfont icon-huangguan1"></span>
            <span class="iconfont icon-huangguan1"></span>
            <span>￥768</span>
          </div>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    scenics: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      showMore: false,
    };
  },
  computed: {
    scenicsList() {
      if (this.showMore) {
        return this.scenics;
      }
      return this.scenics.slice(0, 18);
    },
  },
  methods: {
    loadMore() {
      this.showMore = !this.showMore;
    },
  },
};
</script>

<style scoped lang="less">
.scenics {
  display: flex;
  font-size: 14px;
  color: #666;
  .area {
    width: 70px;
  }
  .address {
    flex: 1;
    .spans {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      span {
        margin-right: 10px;
      }
    }
    .more {
      cursor: pointer;
      .el-icon-d-arrow-right {
        transform: rotate(90deg);
        color: #ff9900;
      }
      .up {
        transform: rotate(270deg);
      }
    }
  }
}
.price {
  display: flex;
  margin-top: 20px;
  font-size: 14px;
  color: #666;
  .area {
    width: 70px;
    position: relative;
    .tips {
      position: absolute;
      text-align: center;
      line-height: 14px;
      width: 14px;
      height: 14px;
      border-radius: 7px;
      color: #fff;
      background: #ddd;
    }
  }
  .score {
    display: flex;
    .mark {
      margin-right: 30px;
      .icon-huangguan1 {
        color: #ff9900;
      }
    }
  }
}
</style>
